<template>
    <el-header height="40px">
        <el-col :md="2" class="logo">
            爱换壁纸
        </el-col>
        <el-col :md="20" class="category">
            <div v-for="(category, idx) in categoryList" :key="idx" class="items" :class="(currentCid == category.cid) ? 'active': ''"
                 @click.stop.prevent="changeCid(category.cid)">{{category.name}}
            </div>
        </el-col>
        <el-col :md="2" class="setting">
            <i class="fa fa-cog fa-fw setting-btn" @click.stop.prevent="openDrawer"></i>
        </el-col>
    </el-header>
</template>

<script>
    export default {
        name: "nav-bar",
        props: {
            categoryList : {
                type: Array,
                default: [],
                required: true
            }
        },
        data () {
          return {
              currentCid: ''
          }
        },
        methods: {
            openDrawer() {
                this.$emit('openDrawer');
            },
            changeCid(cid) {
                this.currentCid = cid;
                this.$emit('update:cid', cid);
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #495A80;
        color: #333;
        text-align: center;
        line-height: 39px;
        padding: 0;
    }
    .logo {
        padding-left: 5px;
        text-align: left;
        font-size: 20px;
        color: bisque;
        font-weight: bold;
    }
    .category {
        text-align: left;
    }
    .category .items {
        color: #F9F9F9;
        float: left;
        min-width: 5%;
        cursor: pointer;
        text-align: center;
        height: 35px;
    }
    .category .items:hover {
        border-bottom: 5px solid #4c8dff;
    }
    .category .items.active {
        color: #4c8dff;
        border-bottom: 5px solid #4c8dff;
        cursor: default;
    }
    .setting {
        padding-right: 10px;
        text-align: right;
    }
    .setting-btn {
        padding: 5px;
        color: antiquewhite;
        font-size: 25px;
        cursor: pointer;
        margin-top: 4px;
    }
</style>
